<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="学习单词列表" />
		<view class="top-menu">
		</view>
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="content-back">
				<view class="sigin-calendar-backView">
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle" style="color: white;">
							本日单词一览 | Today's Word Overview
						</view>
						<view class="gameType-line"></view>
					</view>
					<block v-for="(word, index) in wordLibrary" :key="index">
						<view class='zimuback' :data-index="index" @click="getPlanWordDetail">
							<view class='weizhi'>
								{{word.spell}}
							</view>
						</view>
					</block>
				</view>
			</view>
		</scroll-view>
		<view class="bottombackView">
			<view class="bottomTitleStr">注：如果已全部掌握上述单词，可直接点击去打卡。</view>
			<view class="bottomMenuView">
				<view class="bottom-menuview Clockin" @click="toClickedTap">去打卡</view>
				<view class="bottom-menuview Learn" @click="toLearnTap">去学习</view>
			</view>
		</view>
		<selectContentView v-if="showBeePlanPromptbox" :msg="ReportPromptMsg" :confirmTitle="leftTitle"
			:cancelTitle="rightTitle" @confirm="turnToplayGame" @replaceToBeePlan="replaceToBeePlan" @cancel="hideBeePlanPromptbox"></selectContentView>
			
		<popPromptBox v-if="showPromptbox" :msg="message" @confirm="hideBeePlanPromptbox"></popPromptBox>
		<view v-if="showReviewPop">
			<view class="pop-promot-box">
				<view class="pop-promot-back">
					<view class="pop-promot-title">复习内容选择</view>
					<view class="review-select-back">
						<view class="review-left-str">复习组别：</view>
						<picker-view @change="bindreviewChange">
							<picker-view-column>
								<view class="reviewClass" v-for="(item, index) in allWordList" :key="index">
									{{allWordList[this.reviewGroupsIndex].name}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="review-select-back">
						<view class="review-left-str">复习数量：</view>
						<picker-view @change="bindNumChange">
							<picker-view-column>
								<view class="reviewClass" v-for="(item, index) in reviewNumList" :key="index">
									{{reviewNumList[this.reviewNumIndex]}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="pop-promot-bottomView">
						<button class="bottom-leftbtn cancelButton" @click="hidePromptbox">取消</button>
						<button class="bottom-leftbtn defineButton" @click="ConfirmReviewGame">确定</button>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: 0,
				showBeePlanPromptbox: false,
				showPromptbox: false,
				reviewNumIndex: 0,
				showReviewPop: false,
				reviewGroupsIndex: 0,
				WordGroupsIndex: 0,
				allWordList: [],
				reviewNumList: ['10', '20', '40', '60', '80', '100', '120', '140', '160', '180', '200']
			}
		},
		onReady() {
			const that = this;
			uni.createSelectorQuery().select('.top-menu').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - 80;
			}).exec();
		},
		onLoad(options) {
			var transmitData = JSON.parse(decodeURIComponent(options.transmitData))
			var wordData = JSON.parse(decodeURIComponent(transmitData.wordData))
			var wordLibrary = JSON.parse(this.$globalData.wordListJson);
			var wordIndex = -1;
			console.log('transmitData111', transmitData)
			if (transmitData.type == 'normal') {
				for (let index = 0; index < wordLibrary.length; index++) {
					const element = wordLibrary[index];
					if (element.id == wordData.id) {
						wordIndex = index;
					}
				}
			}
			console.log('transmitData', transmitData)
			this.transmitData = transmitData;
			this.wordReview = transmitData.wordReview;
			this.type = transmitData.type;
			this.dayId = transmitData.dayId;
			this.beePlanLogId = transmitData.beePlanLogId ? transmitData.beePlanLogId : "";
			this.titleStr = transmitData.title;
			this.wordData = wordData;
			this.wordLibrary = wordLibrary;
			this.wordIndex = wordIndex;
		},
		methods: {
			// 去打卡
			toClickedTap: function() {
				var beePlanKey = 'beePlanDate' + (this.titleStr == "生词复习" ? 'review' : 'clock') + this.beePlanLogId + this.transmitData.dayId;
				console.log('beePlanKey', beePlanKey);
				if (uni.getStorageSync(beePlanKey)) {
					this.showBeePlanPromptbox = true;
					this.ReportPromptMsg = '检测到您有之前未完成的打卡记录，是否继续去打卡?';
					this.leftTitle = '继续打卡';
					this.rightTitle = '重新打卡';
				} else {
					this.showBeePlanPromptbox = true;
					this.ReportPromptMsg = this.titleStr == "生词复习" ? '确认已学习完此阶段单词，是否立即去测试？' :
						'确认已学习完此阶段单词，是否立即去打卡？';
					this.leftTitle = '这就去';
					this.rightTitle = '再看看';
				}
			},
			// 重新去打卡
			replaceToBeePlan: function() {
				this.hideBeePlanPromptbox();
				//删除缓存
				var beePlanKey = 'beePlanDate' + (this.titleStr == "生词复习" ? 'review' : 'clock') + this.beePlanLogId + this.transmitData.dayId;
				uni.removeStorage({
					key: beePlanKey,
				})
				if (this.titleStr == "生词复习") {
					this.showSelectPopView();
				} else {
					this.getPlanWordList();
				}
			},
			// 错题本/打卡学习去打卡测试
			turnToplayGame: function() {
				this.hideBeePlanPromptbox();
				if (this.leftTitle == '继续打卡') {
					this.getBeePlanLocalCache();
				} else {
					if (this.titleStr == "生词复习") {
						this.showSelectPopView();
					} else {
						this.getPlanWordList();
					}
				}
			},
			//继续打卡获取本地缓存
			getBeePlanLocalCache: function() {
				var beePlanKey = 'beePlanDate' + (this.titleStr == "生词复习" ? 'review' : 'clock') + this.beePlanLogId + this.transmitData.dayId;
				var beePlanData = JSON.parse(uni.getStorageSync(beePlanKey));
				uni.redirectTo({
					url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
						beePlanData.beePlanLogId + '&beePlanIndex=' + (beePlanData.beePlanIndex + 1) +
						'&planType=' + (this.titleStr == "生词复习" ? 'review' : 'clock') + '&answerarray=' +
						JSON.stringify(beePlanData.answerarray) + '&wordReview=' + this.wordReview +
						'&dayId=' + this.dayId,
				})
			},
			// 查看单词详情
			getPlanWordDetail: function(e) {
				var wordIndex = e.currentTarget.dataset.index;
				var wordData = this.wordLibrary[wordIndex];
				this.toWordDetail(wordData)
			},
			//去学习
			toLearnTap: function() {
				this.toWordDetail(this.wordLibrary[0])
			},
			toWordDetail: function(wordData) {
				var transmitData = {
					wordData: JSON.stringify(wordData),
					title: this.titleStr,
					type: 'normal',
					beePlanLogId: this.beePlanLogId,
					wordReview: this.wordReview,
					dayId: this.dayId
				}
				uni.navigateTo({
					url: '/pages/planBee/wordClockDetailContentView?transmitData=' +
						encodeURIComponent(JSON.stringify(transmitData))
				})
			},
			// 隐藏弹窗页面
			hideBeePlanPromptbox: function(e) {
				this.showBeePlanPromptbox = false;
				this.showPromptbox = false;
			},
			//显示复习内容
			showSelectPopView: function(params) {
				var that = this;
				let formData = {
					"userId": uni.getStorageSync('USER_INFO').userId,
				};
				this.$http.findAllBeePlanWordList(formData).then(res => {
					console.log('findAllBeePlanWordList', res);
					if (res.code == 200) {
						var cikuPlaceArray = [{
							'name': '全部组别',
							'id': '-1'
						}];
						var cikuArray = cikuPlaceArray.concat(res.data.personMatchWord);
						this.showReviewPop = true;
						this.allWordList = cikuArray.concat(res.data.teamMatchWord);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 复习词库选择
			bindreviewChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.reviewGroupsIndex = selectIndex;
			},
			// 复习数量选择
			bindNumChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.reviewNumIndex = selectIndex;
			},
			// 获取生词打卡数据
			ConfirmReviewGame: function() {
				this.hidePromptbox();
				var formData = {
					"userId": uni.getStorageSync('USER_INFO').userId,
					"lexiconId": this.allWordList[this.reviewGroupsIndex].id,
					"reviewNum": this.reviewNumList[this.reviewNumIndex],
				};
				var that = this;
				console.log('formData', formData);
				that.$http.reviewErrorBeePlanWord(formData).then(res => {
					console.log('reviewErrorBeePlanWord', res);
					if (res.code == 200) {
						that.$globalData.wordListJson = JSON.stringify(res.data.words)
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
									that.beePlanLogId + '&planType=' + (that
										.titleStr == "生词复习" ? 'review' : 'clock') +
									'&wordReview=' + that.wordReview + '&dayId=' + that
									.dayId,
							})
						}, 500)
					} else if (res.code == 239) {
						that.showPromptbox = true;
						that.message = res.msg;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取打卡数据
			getPlanWordList: function() {
				uni.redirectTo({
					url: '/pages/planBee/wordClockPreliminaryGame?beePlanLogId=' +
						this.beePlanLogId + '&planType=' + (this.titleStr == "生词复习" ? 'review' :
							'clock') + '&wordReview=' + this.wordReview + '&dayId=' + this.dayId,
				})
			},
			hidePromptbox: function(params) {
				this.showReviewPop = false;
			}
		}
	}
</script>

<style lang="less">
	.sigin-calendar-backView {
		width: 90%;
		margin: 15px 0px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--beeGradientTopBack);
		padding: 20px 5px;
		border-radius: 25px;
	}

	.zimuback {
		width: 90%;
		margin-top: 15px;
		height: 40px;
		border-radius: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #ede6cd;
	}

	.lineView {
		width: 100%;
		height: 1px;
		background-color: white;
	}

	/* 字母位置 */
	.weizhi {
		margin: 0 25px 0 25px;
		color: rgb(0, 0, 0);
	}

	.bottombackView {
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		justify-content: center;
	}

	.bottomTitleStr {
		width: 100%;
		font-size: 12px;
		color: red;
		text-align: center;
		height: 20px;
		line-height: 20px;
	}

	.bottomMenuView {
		width: 100%;
		height: 45px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.bottom-menuview {
		width: 35%;
		height: 40px;
		border-radius: 20px;
		font-size: 15px;
		font-weight: bolder;
		text-align: center;
		line-height: 40px;
	}

	.Clockin {
		color: black;
		background-color: var(--themeColor);
	}

	.Learn {
		color: white;
		background-color: black;
	}

	.pop-promot-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10000;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-promot-back {
		padding: 40rpx;
		width: 80%;
		margin: 0 10%;
		border-radius: 20rpx;
		background-image: url(../../static/image/fjh/onlineGameRuleBackView2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pop-promot-title {
		font-size: 32rpx;
		color: black;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.pop-promot-bottomView {
		width: 100%;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 30rpx;
	}

	.bottom-leftbtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		text-align: center;
		// font-weight: 800;
	}

	.defineButton {
		color: white;
		background: linear-gradient(#fc823d, #fa3748);
	}

	.cancelButton {
		color: black;
		background-color: gray;
	}

	.reviewClass {
		width: 150px;
		height: 30px;
		line-height: 30px;
		padding: 0px 10px;
		text-align: left;
		font-size: 12px;
		background-color: rgb(249, 249, 249);
		color: black;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.review-select-back {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.review-left-str {
		font-size: 26rpx;
		width: 70px;
	}
</style>